<template>
	<view>
		<view class="tab">
			<view class="tab-item" :class="tabIndex==0?'active':''"  @click="chgTab(0)">待处理 <view :class="tabIndex==0?'active':''"></view></view>
			<view class="tab-item" :class="tabIndex==1?'active':''"  @click="chgTab(1)">已通过 <view :class="tabIndex==1?'active':''"></view></view>
			<view class="tab-item" :class="tabIndex==2?'active':''"  @click="chgTab(2)">已拒绝 <view :class="tabIndex==2?'active':''"></view></view>
		</view>
		
		
		<view v-if="!isNull" v-for='itm in LeaveLog' class="list" @click="goDetail(itm.id,itm.status)">
			<view class="item"><view class="title">请假学员：</view>{{itm.applyUserName}}</view>
			<view class="item"><view class="title">申请时间：</view>{{itm.createTime}}</view>
			<view class="item"><view class="title">请假类型：</view>{{itm.typeName}}</view>
			<view class="item"><view class="title">请假原因：</view>{{itm.reason}}</view>
			
			<view class="item" :class="itm.status==1?'status':''">
				<view v-if='itm.status==1' style="display: flex;">
					<view style="white-space: nowrap;">拒绝原因：</view>
					<view>{{itm.replay}}</view>
				</view>
			</view>
		</view>
		<view v-if="isNull" class="order_null">
			<image src="../../static/null/jl@2x.png"></image>
			<text>暂时还没有请假记录~</text>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tabIndex:0,
				list:[  //status: 0:待审核  1:已通过   -1:未通过
					{"student":'刘先生', 'type':'事假', apply_time:'2021-02-13 10:36',status:0, memo:'因为家中人生病无人能帮忙照顾，明天要请假1天。'},
					{"student":'刘先生', 'type':'事假', apply_time:'2021-02-13 10:36',status:1, memo:'因为个人原因，明天要请假1天。'},
					{"student":'刘先生', 'type':'事假', apply_time:'2021-02-13 10:36',status:-1, memo:'因为个人原因，明天要请假1天。','msg':'理由不合适，给予驳回处理。如有必要，请详细说明请假原因，并重新提交申请。'}
				],
				all:[],
				LeaveLog:'',
				isNull:false,
				shopId:'',
			}
		},
		onLoad() {
			this.shopId = uni.getStorageSync('shopId')
			this.all = this.list;
			this.list = this.all.filter(function(itm){
				return itm.status == 0;
			})
			this.chgTab(0)
		},
		onShow() {
			uni.$on("backdata", res => {
				console.log(res)
			        // 清除监听
					this.chgTab(res)
			        uni.$off('handleFun');
			    })
		},
		methods: {
			chgTab(index){
				this.tabIndex = index;
				if(index == 0){
					this.getLeaveLog(0)
				}else if(index == 1){
					this.getLeaveLog(2)
				}else if(index == 2){
					index = -1;
					this.getLeaveLog(1)
				}
				console.log(index)
				var tmp = this.all.filter(function(itm){
					return itm.status == index;
				})
				this.list = tmp;
				
			},
			goDetail(id,status){
				if(status==0){
					uni.navigateTo({
						url:'leave_detail?id='+id
					})
				}
				
			},
			getLeaveLog(payState){
				this.$api.getLeaveLog({
					status:payState,
					shopId:this.shopId
				}).then((res) => {
					if (res.data.code == 200) {
						console.log(res.data.dataMap)
						this.LeaveLog = res.data.dataMap
						this.isNull = this.LeaveLog.length < 1 ? true : false
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.order_null {
		display: flex;
		width: 100%;
		flex-direction: column;
	}
	
	.order_null text {
		margin: 0 auto;
		color: #c8c8c8;
	}
	
	.order_null image {
		margin: 60rpx auto;
		width: 300rpx;
		height: 300rpx;
	}
  page{background: #F8F8F8;}
 .tab{
	 background-color: white;
  	 display: flex;
  	 justify-content: space-around;
	 padding:15px 15px 0px 15px;
  	 .active{font-weight: bold;}
  	 .tab-item{
		 font-size: 28rpx;
  		 border-bottom: 5px solid white;
  		 .active{
  		   	background:linear-gradient(90deg, rgb(255,228,106), rgb(249,155,68));
  		   	border-radius: 20rpx;
  		   	margin:auto;
  		   	margin-top:5px;
  		   	height:5px;
  		   	width:60%;}
  		 }
  }
  
  .list{ background-color: white;margin-top:10px;padding:10px;color:#333333;line-height: 50rpx;
     .title{color:#999999;white-space: nowrap;}
  }
  
  .item{
  	  display: flex;
  }
  .status{border-top:1px solid #EEEEEE;margin-top:10px;padding-top:10px;color:#333333;font-weight: bold;}
</style>
